<template>
  <el-row align="middle" justify="end" class="wrapper_bg">
    <el-col :pull="2" :xs="8" :sm="8" :md="8" :lg="6" :xl="5" class="login_bg">
      <div class="login_description">
        <span>欢迎登陆</span>
        <span>982换电智能服务后台</span>
      </div>
      <div class="login_qr">
        <Qrcode :value="qrcode" :size="200" foreground="rgba(2, 76, 190, 1)" style="cursor: pointer"
                @click="flushedQRcode"/>
        <span>*请使用运维版小程序扫码登录</span>
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import Qrcode from 'qrcode.vue'
import {ulid} from "ulid";
import {useRouter, useRoute} from "vue-router";
import {useCounterStore} from '@/store/counter'
import {ElNotification} from "element-plus";

const router = useRouter();
const route = useRoute()
const store = useCounterStore()

let qrcode = ref<string>(`982${ulid()}`)
let redirect = ref(undefined)
let timer = ref()
const flushedQRcode = () => {
  qrcode.value = `982${ulid()}`
}
onMounted(() => {
  timer.value = setInterval(() => {
    checkLoginState()
  }, 5000)
})
const checkLoginState = async () => {
  store.login(qrcode.value).then((resp) => {
    if (timer.value) clearInterval(timer.value)
    router.replace(redirect.value || '/')
    setTimeout(() => {
      ElNotification({
        title: '登录成功',
        message: `欢迎登录 ${resp.name}`,
        type: 'success',
        duration: 3000
      })
    }, 1300)
  })
}
watch(() => route, () => {
  redirect.value = decodeURIComponent(route.fullPath).split('redirect=')[1] as any
}, {immediate: true, deep: true})
</script>
<style lang="scss" scoped>
.wrapper_bg {
  height: 100vh;
  background-image: url(https://intelligent-charge-admin.oss-cn-shanghai.aliyuncs.com/img/login/loginBg.png);
  background-size: 100% 100%;

  .login_bg {
    padding: 0 0 30px 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.69) 0%, rgba(255, 255, 255, 0.22) 100%);
    box-shadow: 0px 4px 4px 0px #BDCDF2;
    border-radius: 20px 20px 20px 20px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .login_description {
      margin-top: 15%;
      display: flex;
      flex-direction: column;

      & span:nth-of-type(1) {
        color: #333333;
        font-size: 30px;
      }

      & span:nth-of-type(2) {
        color: #024CBE;
        font-size: 28px;
        font-weight: bold;
      }
    }

    .login_qr {
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      object-fit: contain;

      & span:nth-of-type(1) {
        margin-top: 40px;
        color: #024CBE;
        font-size: 20px;
      }
    }
  }
}
</style>

